<template>
    <el-dialog id="compete_create" :title="'创建比赛场次 ' + session.ComputeEventName + ' ' + session.ComputeGroupName" width="60%" :visible.sync="dialogVisible">
        <div>
            <session-modify :data="session"></session-modify>                    
            <el-table v-if="session!=null" ref="scoreTable" :data="session.SessionCompetes" stripe border 
               :default-sort="{prop: 'TotalScore', order: 'descending'}" max-height=300 style="width: 100%"
               @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>                
                <el-table-column align="center" prop="SortIndex" sortable label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="Compete.PassportNo" label="通行证" width="130"></el-table-column>
                <el-table-column align="center" label="姓名/团队">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Compete.Passport != null">{{scope.row.Compete.Passport.User.Name}}</span>
                        <span v-if="scope.row.Compete.Team != null">
                            <li class="fa fa-users"></li>
                            {{scope.row.Compete.Team.Name}}({{scope.row.Compete.Team.Leader.User.Name}})
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="国家地区">
                    <template slot-scope="scope">
                        <span v-if="scope.row.Compete.Team!=null">{{scope.row.Compete.Team.Leader.User | location}}</span>
                        <span v-if="scope.row.Compete.Passport!=null">{{scope.row.Compete.Passport.User | location}}</span>                        
                    </template>
                </el-table-column>  
                <el-table-column align="center" prop="Compete.MusicName" label="曲目"></el-table-column>                
                <el-table-column align="center" prop="TotalScore" label="总成绩" sortable width="100"></el-table-column>
            </el-table>
            <form action="#" class="form-horizontal" style="margin-top: 10px;">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-12">                                    
                                    <span>前</span>
                                    <el-input-number v-model="rank" controls-position="right" :min="1" :max="100" style="width:100px;"></el-input-number>
                                    <span>名</span>
                                    <el-button type="primary" @click="selectBetweenScoreRange(session.SessionCompetes)">选中</el-button>
                                </div>
                            </div> 
                        </div>
                    </div>                     
                </div>
            </form>           
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :disabled="multipleSelection.length==0" @click="createSession()">确 定</el-button>
        </span>            
    </el-dialog>
</template>

<script>

import {DeepClone, LocationStringFormatFromUser}  from 'web/utils';
import SessionModify from './session_modify.vue';

export default {       
    components: {
        SessionModify
    },
    filters: {
        location: LocationStringFormatFromUser
    },
    data() {
        return {      
            dialogVisible: false,  
            session: {},  
            rank: 10,
            multipleSelection: []
        }
    },
    methods: {
        showDialog(data) {
            this.dialogVisible = true;
            this.session = data;
            data.SessionCompetes.sort((a, b) => {
                return Math.sign(b.TotalScore - a.TotalScore);
            });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },    

        selectBetweenScoreRange(rows) {
            this.$refs.scoreTable.clearSelection();
            for(let i = 0; i < this.rank; i++) {
                let row = this.session.SessionCompetes[i];
                if (row.TotalScore && row.TotalScore != "")
                    this.$refs.scoreTable.toggleRowSelection(row, true);
            }
        },

        createSession() {
            let session = DeepClone(this.session);
            session.SessionCompetes = DeepClone(this.multipleSelection);
            session.Recorder = null;
            session.RecordTime = null;
            session.Reviewer = null;
            session.ReviewTime = null;
            session.SessionCompetes.sort((a, b) => {
                return Math.sign(b.TotalScore - a.TotalScore);
            });
            session.SessionCompetes.forEach((item, index) => {
                item.SortIndex = index + 1;
                item.Score0 = null;
                item.Score1 = null;
                item.Score2 = null;
                item.Score3 = null;
                item.Score4 = null;
                item.Score5 = null;
                item.Score6 = null;
                item.Score7 = null;
                item.Score8 = null;
                item.TotalScore = null;
            });
            this.$SessionService.CreateSession(session)
                .then(ret => {
                    if(ret) {
                        this.$notify({
                            title: '保存成功',
                            message: '比赛场次创建成功！',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                    }
                });
        }
    }
}
</script>

<style>
#compete_create .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
}
</style>
